<template>
  <up-picker v-if="storeTree.length" :show="show" :columns="[storeTree]" keyName="name" @cancel="handleCancel" @confirm="handleConfirm"></up-picker>
  <!-- <up-popup :show="show" mode="bottom" :round="10" @close="handleCancel">
    <view class='popup'>
      <div class="popup-header">
        <view class="popup-title">所有用户转移到门店</view>
      </div>
      <scroll-view class="popup-content" scroll-y>
        <view class="list">
          <view class="item" v-for="(item, index) in storeTree" :key="index">{{item.name}}</view>
        </view>
      </scroll-view>
      <div class="popup-footer">
        <up-button type="primary" block plain @click="handleCancel">取 消</up-button>
        <up-button class="ml-[30rpx]" type="primary" block @click="handleConfirm">确 定</up-button>
      </div>
		</view>
  </up-popup> -->
</template>
<script lang="ts" setup>
import { getStoreTreeApi } from '@/addon/htscrm/api';
import { ref } from 'vue'
const emit = defineEmits(['cancel', 'confirm'])

const show = ref(false)
const storeTree = ref<IStoreTreeItem[]>([])
function close () {
	show.value = false
}
async function open (item:any) {
  await getStoreTree()
  show.value = true
  console.log(item);
}

function handleCancel() {
  close()
  emit('cancel')
}

function handleConfirm(e:any) {
  close()
  emit('confirm', e.value[0])
}

async function getStoreTree() {
  const res = await getStoreTreeApi()
  console.log(res);
  storeTree.value = res.data
}


defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.popup {

	.popup-header {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
    }
	}

	.popup-content {
    height: 60vh;
    .list {
      height: 100%;
      overflow-y: scroll;
      padding: 0 30rpx;
      .item {
        padding: 20rpx 0;
        text-align: center;
        border-bottom: 1px solid #eee;
      }
    }
	}

  .popup-footer {
    display: flex;
    padding: 20rpx 30rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

  }
}
</style>